@charset "utf-8";
@import "init";
@import "common";


main{
	position: absolute;
	left: 0;
	top: r(89);
	bottom: r(107);
	width: 100%;
	overflow-y: auto;
	background-color:#f5f5f5;
	.banner{
		width: 100%;
		height: r(276s);
		overflow: hidden;
		position: relative;
		.img_banner{
			padding: r(14) 0 0;
			box-sizing: border-box;
			width: 100%;
			height: r(181);
			overflow: hidden;
			img{
				width: 100%;
			}
		}
		
		
		
	}

	input{
		display: none;
		
	}
	#check1:checked{
		&~.article{
			display: block;
		}
		&~.box{
			.one{
				background-color: $bg_color;
				li{
					color: white;
				}
			}
		}
	}
	#check2:checked{
		&~.article1{
			display: block;
		}
		&~.box{
			.two{
				background-color: $bg_color;
				li{
					color: white;
				}
			}
		}
	}
	#check3:checked{
		&~.article2{
			display: block;
		}
		&~.box{
			.three{
				background-color: $bg_color;
				li{
					color: white;
				}
			}
		}
	}
	.box{
		margin-top: r(14);
		
		ul{
			width: 100%;
			
			label{
				width: 33.33%;
				height: r(88);
				text-align: center;
				line-height: r(88);
				li{
					color: #898989;
					font-size: r(22);
				}
			}
		}
		
		
		
		
	
	}

	.article{
		width: 100%;
		padding: r(20) r(29) r(0);
		margin-top: r(14);
		padding-bottom: r(14);
		box-sizing: border-box;
		background-color: white;
		display: none;
		.content{
			width: 100%;
			border-bottom:1px solid $sub_color;
			p{
				font-size: r(20);
				color: #8b8b8b;
				padding-bottom: r(28);
				box-sizing: border-box;
				text-indent:2em;
				text-align: justify;
			}
		}
		
		.img_box{
			margin-top: r(38);
			width: r(583);
			height: r(364);
			overflow: hidden;
			border-bottom:1px solid $sub_color;
			img{
				width: 100%;
			}
		}
	}

	.article1{
		width: 100%;
		padding: r(20) r(29) r(0);
		margin-top: r(14);
		padding-bottom: r(14);
		box-sizing: border-box;
		background-color: white;
		display: none;
		p{
			font-size: r(20);
			color: #8b8b8b;
			padding-bottom: r(28);
			box-sizing: border-box;
			text-indent:2em;
			text-align: justify;
		}
	}

	.article2{
		width: 100%;
		padding: r(20) r(29) r(0);
		margin-top: r(14);
		padding-bottom: r(14);
		box-sizing: border-box;
		background-color: white;
		display: none;
		p{
			font-size: r(20);
			color: #8b8b8b;
			padding-bottom: r(28);
			box-sizing: border-box;
			text-indent:2em;
			text-align: justify;
		}
	}

	.development{
		width: 100%;
		padding: r(20) r(29) r(0);
		box-sizing: border-box;
		background-color:white;
		.course{
			widows: 100%;
			height: r(80);
			display: flex;
			background-color:$bg_color;
			i{
				font-size: r(42);
				color: white;
				vertical-align: middle;
				line-height: r(88);
				padding: 0 r(25);
			}
			p{
				font-size: r(30);
				color: white;
				vertical-align: middle;
				line-height: r(88);
				padding-right: r(182);
			}
		}
	
		.market{
			widows: 100%;
			height: r(108);
			display: flex;
			position: relative;
			i{
				font-size: r(34);
				color:#d4dee0;
				vertical-align: middle;
				line-height: r(88);
				padding: 0 r(28);
				background-color:white ;
			}
			.millon{
				vertical-align: middle;
				margin-top: r(38);
				p{
					font-size: r(31.64);
					color:#313131;
					line-height: r(14);
				}
				span{
					font-size: r(20);
					color:$bg_color;
				}
			}
			
		}
		.market::before{
			content: "";
			display: block;
			width: 1px;
			height:r(30);
			background-color:#d0dbdc;
			position: absolute;
			top: 0;
			left: 22px;
		}
		.market::after{
			content: "";
			display: block;
			width: 1px;
			height:r(54);
			background-color:#d0dbdc;
			position: absolute;
			top: 28px;
			left: 22px;
		}
	
		.market1{
			widows: 100%;
			height: r(108);
			display: flex;
			background-color: #f3f3f3;
			position: relative;
			i{
				font-size: r(34);
				color:#d4dee0;
				vertical-align: middle;
				line-height: r(88);
				padding: 0 r(28);
				color: $bg_color;
				
			}
			.millon{
				vertical-align: middle;
				margin-top: r(38);
				p{
					font-size: r(31.64);
					color:#313131;
					line-height: r(14);
				}
				span{
					font-size: r(20);
					color:$bg_color;
				}
			}
		}
		.market1::before{
			content: "";
			display: block;
			width: 1px;
			height:r(30);
			background-color:#d0dbdc;
			position: absolute;
			top: 0;
			left: 22px;
		}
		.market1::after{
			content: "";
			display: block;
			width: 1px;
			height:r(54);
			background-color:#d0dbdc;
			position: absolute;
			top: 28px;
			left: 22px;
		}
	}
}